import React from 'react';
import { Form, Select, DatePicker } from 'antd';
import language from "@/locales/zh_cn";
import dayjs from 'dayjs';

interface Props {
  activeBatchOrder: any;
  onChange: (payload: any) => void;
}

const { Option } = Select;
const selectProps = {
  dropdownMatchSelectWidth: false,
};

const Header: React.FC<Props> = ({ activeBatchOrder, onChange }) => {
  // const language = useLanguage();

  const {
    id, capacity, user_list, station_list, device_list, line_list,
    work_user_id, work_station_id, work_line_id, work_device_id, work_time,
    work_start, work_end,
  } = activeBatchOrder ?? {};

  const getItems = () => {
    switch (capacity) {
      case 1: return <>
        {id && (
          <Form.Item label="工位:" name="work_station_id">
            <Select
              allowClear
              style={{ width: 200 }}
              value={work_station_id}
              {...selectProps}
              onChange={(value, option: any) => {
                const item = option || {};
                onChange({ work_station_id: value, color: item?.color || activeBatchOrder.bom_color });
              }}
            >
              {station_list?.map((item: any) => (
                <Option key={item.id} value={item.id} color={item.color}>
                  <div className="flex-middle">
                    <div className="flex-1">{`${item.station_num}（${item.station_name}）`}</div>
                    <div style={{ width: 24, height: 24, background: item.color }}></div>
                  </div>
                </Option>
              ))}
            </Select>
          </Form.Item>
        )}
        {id && (
          <Form.Item label="人员:" name="work_user_id">
            <Select
              allowClear
              style={{ width: 200 }}
              value={work_user_id}
              {...selectProps}
              onChange={(value) => {
                onChange({ work_user_id: value });
              }}
            >
              {user_list?.map((item: any) => (
                <Option key={item.id} value={item.id}>
                  {item.user_name}
                </Option>
              ))}
            </Select>
          </Form.Item>
        )}
      </>;
      case 2: return <>
        {id && (
          <Form.Item label={`${language.equipment}：`} name="work_device_id">
            <Select
              allowClear
              style={{ width: 200 }}
              value={work_device_id}
              {...selectProps}
              onChange={(value, option: any) => {
                const item = option || {};
                onChange({ work_device_id: value, color: item?.color || activeBatchOrder.bom_color });
              }}
            >
              {device_list?.map((item: any) => (
                <Option key={item.id} value={item.id} color={item.color}>
                  <div className="flex-middle">
                    <div className="flex-1">{`${item.device_num}（${item.device_name}）`}</div>
                    <div style={{ width: 24, height: 24, background: item.color }}></div>
                  </div>
                </Option>
              ))}
            </Select>
          </Form.Item>
        )}
        {id && (
          <Form.Item label="人员:" name="work_user_id">
            <Select
              allowClear
              style={{ width: 200 }}
              value={work_user_id}
              {...selectProps}
              onChange={(value) => {
                onChange({ work_user_id: value });
              }}
            >
              {user_list?.map((item: any) => (
                <Option key={item.id} value={item.id}>
                  {item.user_name}
                </Option>
              ))}
            </Select>
          </Form.Item>
        )}
        {id && (
          <Form.Item label="工位:" name="work_station_id">
            <Select
              allowClear
              style={{ width: 200 }}
              value={work_station_id}
              {...selectProps}
              onChange={(value) => {
                onChange({ work_station_id: value });
              }}
            >
              {station_list?.map((item: any) => (
                <Option key={item.id} value={item.id}>
                  {item.station_name}
                </Option>
              ))}
            </Select>
          </Form.Item>
        )}
      </>;
      case 3: return <>
        {id && (
          <Form.Item label="工位:" name="work_station_id">
            <Select
              allowClear
              style={{ width: 200 }}
              value={work_station_id}
              {...selectProps}
              onChange={(value, option: any) => {
                const item = option || {};
                onChange({ work_station_id: value, color: item?.['color'] || activeBatchOrder.bom_color });
              }}
            >
              {station_list?.map((item: any) => (
                <Option key={item.id} value={item.id} color={item.color}>
                  <div className="flex-middle">
                    <div className="flex-1">{`${item.station_num}（${item.station_name}）`}</div>
                    <div style={{ width: 24, height: 24, background: item.color }}></div>
                  </div>
                </Option>
              ))}
            </Select>
          </Form.Item>
        )}
        {id && (
          <Form.Item label="人员:" name="work_user_id">
            <Select
              allowClear
              style={{ width: 200 }}
              value={work_user_id}
              {...selectProps}
              onChange={(value) => {
                onChange({ work_user_id: value });
              }}
            >
              {user_list?.map((item: any) => (
                <Option key={item.id} value={item.id}>
                  {item.user_name}
                </Option>
              ))}
            </Select>
          </Form.Item>
        )}
      </>;
      case 4: return <>
        {id && (
          <Form.Item label="人员:" name="work_user_id">
            <Select
              allowClear
              style={{ width: 200 }}
              value={work_user_id}
              {...selectProps}
              onChange={(value) => {
                onChange({ work_user_id: value });
              }}
            >
              {user_list?.map((item: any) => (
                <Option key={item.id} value={item.id}>
                  {item.user_name}
                </Option>
              ))}
            </Select>
          </Form.Item>
        )}
        {id && (
          <Form.Item label="工位:" name="work_station_id">
            <Select
              allowClear
              style={{ width: 200 }}
              value={work_station_id}
              {...selectProps}
              onChange={(value) => {
                onChange({ work_station_id: value });
              }}
            >
              {station_list?.map((item: any) => (
                <Option key={item.id} value={item.id}>
                  {item.station_name}
                </Option>
              ))}
            </Select>
          </Form.Item>
        )}
      </>;
      case 5: return <>
        {id && (
          <Form.Item label={`${language.line}：`} name="work_line_id">
            <Select
              allowClear
              style={{ width: 200 }}
              value={work_line_id}
              {...selectProps}
              onChange={(value, option: any) => {
                const item = option?.props || {};
                onChange({ work_line_id: value, color: item.color || activeBatchOrder.bom_color });
              }}
            >
              {line_list?.map((item: any) => (
                <Option key={item.id} value={item.id} color={item.color}>
                  <div className="flex-middle">
                    <div className="flex-1">{`${item.line_num}（${item.line_name}）`}</div>
                    <div style={{ width: 24, height: 24, background: item.color }}></div>
                  </div>
                </Option>
              ))}
            </Select>
          </Form.Item>
        )}
      </>;
    }
  };

  return (
    <div className="dispatch-header border pd-10 mb-10">
      <Form layout="inline" labelAlign="right" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        {getItems()}
        {id && (
          <Form.Item label="时间:">
            <DatePicker.RangePicker
              value={work_start && work_end ? [dayjs(work_start), dayjs(work_end)] : null}
              showTime={{ format: 'HH:mm' }}
              format="YYYY-MM-DD HH:mm"
              onChange={(value) => {
                const [work_start, work_end] = value || [];
                onChange({ 
                  work_start: work_start ? work_start.format('YYYY-MM-DD HH:mm:ss') : null,
                  work_end: work_end ? work_end.format('YYYY-MM-DD HH:mm:ss') : null
                });
              }}
            />
          </Form.Item>
        )}
      </Form>
    </div>
  );
};

export default Header;